import React, { useContext, useState } from 'react';
import styles from './index.module.scss';

import { Button, Table, Pagination, Tag } from '@alifd/next';

import { Link } from 'ice';

import CustomIcon from '@/components/CustomIcon';

import handleFn from '../handle';

const PAGE_SIZE = 10;


// table的列配置
const tableConfig = [
    {
      title: 'Name',
      dataIndex: 'name',
      sortable: true,
      content: (value, index, record) => {
        return (
          <Link to={`/devices/deviceinfo/${record._id}`}>{value}</Link>
        )
      }
    },
    {
      title: 'Status',
      dataIndex: 'deviceStatus',
      sortable: true
    },
    {
      title: 'Approved',
      dataIndex: 'isApproved',
      sortable: true
    },
    {
      title: 'Connected',
      dataIndex: 'isConnected',
      sortable: true
    },
    {
      title: 'Sync',
      dataIndex: 'sync',
      sortable: true
    },
    {
      title: 'Actions',
      dataIndex: 'actions',
      sortable: false,
      width: 200,
      lock: true,
      content: (value, index, record) => {
        console.log(record)
        return (<>
          <Button disabled={record.isConnected.props.color == 'red' || record.deviceStatus == 'running'} onClick={() => handleFn['START'](record._id)} style={{marginRight: '4px'}} className="round-button" type="secondary">
              <CustomIcon type="iconplay-circle"/>
          </Button>
          <Button disabled={record.isConnected.props.color == 'red' || record.deviceStatus == 'stopped'} onClick={() => handleFn['STOP'](record._id)} style={{marginRight: '4px'}} className="round-button" type="primary" warning>
              <CustomIcon type="iconborder"/>
          </Button>
          <Button onClick={() => handleFn['UPDATE'](record._id)} style={{marginRight: '4px'}} className="round-button" type="primary">
              <CustomIcon type="iconsync"/>
          </Button>
          <Button onClick={() => handleFn['DELETE'](record._id)} style={{marginRight: '4px'}} className="round-button" type="primary" warning>
              <CustomIcon type="icondelete"/>
          </Button>
        </>)
      }
    },
    {
      title: 'Version',
      dataIndex: 'versions',
      sortable: true
    },
    {
      title: 'Desc',
      dataIndex: 'description',
      sortable: true
    },
    {
      title: 'Hostname',
      dataIndex: 'hostname',
      sortable: true
    },
    {
      title: 'WAN IPs',
      dataIndex: 'ipList',
      sortable: true
    },
    {
      title: 'ID',
      dataIndex: '_id',
      sortable: true
    },
    {
      title: 'S/N',
      dataIndex: 'serial',
      sortable: true
    },
];


const TableView = ( { rowData, onSel } ) => {
  let [currentPage, onCurrentPage] = useState(1)
  // 数据过滤清洗
  let dataSource = [];
  rowData.forEach(item => {
    dataSource.push({
      name:item.name,
      deviceStatus: !!item.deviceStatus.state ? item.deviceStatus.state : 'Pending',
      isApproved: <Tag size="small" type="normal" color={item.isApproved ? 'green' : 'red'}>{item.isApproved ? 'Approved' : 'Not Approved'}</Tag>,
      isConnected: <Tag size="small" type="normal" color={item.isConnected ? 'green' : 'red'}>{item.isConnected ? 'Connected' : 'Not Connected'}</Tag>,
      sync: <>{ item.sync.state == 'synced' ? <Tag size="small" type="normal" color={item.sync.state == 'synced' ? 'green' : ''}>{item.sync.state == 'synced' ? 'Synced' : ''}</Tag> : ''}</>,
      actions: '',
      versions: item.versions.agent,
      description: item.description,
      hostname: item.hostname,
      ipList: item.ipList,
      _id: item.machineId,
      serial: item.serial
    })
  });

  let d = dataSource.slice((currentPage-1)*PAGE_SIZE,currentPage*PAGE_SIZE)
  
  // 表选择
  const onTableChange = (selectedRowKeys, records) => {
    onSel(selectedRowKeys)
    console.log('records', records);
  };

  const rowSelection = {
      onChange: onTableChange,
      getProps: (record, index) => {
          
      }
  };

  // 分页
  const onPageChange = currentPage => {
    onCurrentPage(currentPage)
  };
  
  return (
    <div className={styles['table-view']}>
        <div className={styles['display-table']}>
            <Table
                primaryKey="_id"
                dataSource={d}
                rowSelection={rowSelection}
                scroll="true"
                style={{overflow: 'scroll'}}
            >
                {
                tableConfig.map((item,i) => {
                    return (
                      <Table.Column
                        align="center"
                        width={item.width}
                        lock={item.lock}
                        key={i} 
                        title={item.title} 
                        dataIndex={item.dataIndex} 
                        sortable={item.sortable}
                        cell={item.content}
                      />
                    )
                })
                }
            </Table>
        </div>
        <div className={styles['display-pagination']}>
            <Pagination 
              onChange={onPageChange}
              total={dataSource.length}
              pageSize={PAGE_SIZE}
              pageShowCount={5} 
            />
        </div>
    </div>
  );
}

export default TableView;